<template>
  <div>
    <el-button
      type="primary"
      size="small"
      class="pull-right"
      icon="el-icon-upload"
      @click="pop_show = true"
    >
      上传视频
    </el-button>
    <el-dialog title="上传视频" :visible.sync="pop_show" width="35%">
      <el-alert
        :closable="false"
        :title="`支持mp4/ogg/webm格式，视频最大时长不超过30min。`"
        type="info"
      ></el-alert>
      <br />
      <el-form
        ref="BrandsForm"
        :model="filesForm"
        status-icon
        :rules="rulesBrandsForm"
        label-width="100px"
      >
        <el-form-item label="上传视频：" prop="logo">
          <el-upload action="" :auto-upload="false">
            <el-button size="small" type="primary">点击选择本地视频</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'MyUpload',
    data() {
      return {
        pop_show: false,
        filesForm: {
          file: '',
        },
        rulesBrandsForm: {},
      }
    },
    mounted() {},
    methods: {
      submitForm() {
        let fileValue = document.querySelector('.el-upload .el-upload__input')
        let fd = new FormData()
        fd.append('file', fileValue.files[0], fileValue.files[0].name)
        this.axios
          .post(cons.apis + '/skus/files/', fd, {
            responseType: 'json',
          })
          .then((dat) => {
            console.log(dat)
            if (dat.status === 201) {
              this.$message({
                type: 'success',
                message: '上传成功!',
              })
              this.pop_show = false
            }
          })
          .catch((err) => {
            console.log(err.response)
          })
      },
    },
  }
</script>
